<template>
   <view class="mons">
		<view class="top">
			<navigator @click="link">
				<image src="../../static/img/3/3-97.png" mode="widthFix"></image>
				在线客服
			</navigator>
			<view @click="tan">
				<image style="width: 115rpx;" src="../../static/img/3/3-98.png" mode="widthFix"></image>
				客服热线
			</view>
		</view>
		<view class="h3">
			问题分类
		</view>
		<view class="list">
			<navigator url="/pages/user/problem" class="li">
				常见问题
				<view class="rig">
					<image src="../../static/img/3/3-99.png" mode="widthFix"></image>
				</view>
			</navigator>
			<navigator url="/pages/user/problem" class="li">
				配送问题
				<view class="rig">
					<image src="../../static/img/3/3-99.png" mode="widthFix"></image>
				</view>
			</navigator>
			<navigator url="/pages/user/problem" class="li">
				售后问题
				<view class="rig">
					<image src="../../static/img/3/3-99.png" mode="widthFix"></image>
				</view>
			</navigator>
			<navigator url="/pages/user/problem" class="li">
				优惠问题
				<view class="rig">
					<image src="../../static/img/3/3-99.png" mode="widthFix"></image>
				</view>
			</navigator>
		
		</view>
		<view class="meng" v-if="meng">
			<view class="tan">
				<view class="title">
					<view class="close" @click="tan">
						<image src="../../static/img/3/3-96.png" mode="widthFix"></image>
					</view>
					<view class="p">
						是否拨打客服热线？
						<view >
							400-6565-215
						</view>
					</view>
					<view class="call" @click="tel">
						拨打电话
					</view>
				</view>
			</view>
		</view>
   </view>
</template>

<script>
    export default {
        name: "",
        components:{
            
        },
        data(){
            return {
                meng:false
            }
        },
      methods:{
		  tel(){
			  uni.makePhoneCall({
			  	phoneNumber: '13222224444' //仅为示例
			  });
		  },
		  tan(){
			  if(this.meng){
				  this.meng=false
			  }else{
				  this.meng=true
			  }
			  
		  },
		  link(){
			window.open('https://yongyou-c7ca5f-8498.udesk.cn/im_client/?web_plugin_id=125391')
		  }
	  }

    }
</script>

<style scoped>
	.meng{
		position: fixed;
		left: 0;
		top: 0;
		background: rgba(0,0,0,0.2);
		width: 100%;
		height: 100%;
	}
	.tan{
		width:582rpx;
		height:415rpx;
		background:rgba(255,255,255,1);
		border-radius:15rpx;
		position: absolute;
		margin: auto;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		padding: 30rpx;
	}
	.tan .title{
		text-align: right;
		
	}
	.tan .title .close{
		display: inline-block;
		width:34rpx;
		height:34rpx;
	}
	.tan .title .close image{
		display: block;
		width:34rpx;
		height:34rpx;
	}
	.tan .p{
		font-size:26rpx;
		font-family:Microsoft YaHei;
		font-weight:400;
		color:rgba(102,102,102,1);
		margin-top: 53rpx;
		text-align: center;
	}
	.tan .p view{
		margin-top: 18rpx;
	}
	.tan .call{
		width:450rpx;
		height:67rpx;
		background:rgba(19,192,164,1);
		border-radius:5rpx;
		margin: auto;
		font-size:26rpx;
		font-family:Microsoft YaHei;
		font-weight:400;
		color:rgba(255,255,255,1);
		line-height:67rpx;
		text-align: center;
		margin-top: 90rpx;
	}
	.h3{
		font-size:26rpx;
		font-family:Microsoft YaHei;
		font-weight:400;
		color:rgba(51,51,51,1);
		height: 57rpx;
		line-height: 57rpx;
		padding-left: 22rpx;
	}
	.top view,navigator{
		flex: 1;
		border-right: 1px solid #eee;
		padding: 77rpx  120rpx  20rpx 120rpx;
		text-align: center;
		font-size:26rpx;
		font-family:Microsoft YaHei;
		font-weight:400;
		color:rgba(51,51,51,1);
	}
	.top view{
		border: 0;
	}
	.top view,navigator image{
		display: block;
		width: 111rpx;
		margin: auto;
		margin-bottom: 16rpx;
	}
	.list .li{
		margin-bottom: 1px;
		background: #fff;
		padding-left: 20rpx;
		padding-right: 20rpx;
		padding-bottom: 30rpx;
		padding-top: 30rpx;
		font-size:26rpx;
		font-family:Microsoft YaHei;
		font-weight:400;
		color:rgba(102,102,102,1);
		text-align: left;
	}
	.list .li .rig{
		display: inline-block;
		float: right;
	}
	.list .li .rig image{
		display: inline-block;
		width: 16rpx;
		vertical-align: middle;
		margin-left: 19rpx;
	}
		.list .li .rig text{
			display: inline-block;
			vertical-align: middle;
		}
	uni-page-body{
		height: 100%;
	}
	.mons{
		min-height: 100%;
		background: #EEEEEE;
	}
	.top{
		background: #fff;
		display: flex;
	}
	
</style>
